<template>
	<view class="content-wrapper">
		<view class="head">
			<view class="left">
				店铺认证
			</view>
			<view class="right">
				填写认证快速通过
			</view>
		</view>
		<!-- 经营照片 -->
		<view class="form-wrapper">
			<view class="door-info">
				<view class="item">
					<!-- 上传按钮 -->
					<view class="btn-upload" @click="uploadDoorImg('door')">
						<template v-if="!formData.image">

							<image class="img" src="/static/icon/add_icon.png" />
						</template>

						<!-- 提示：点击修改 -->
						<view class="text-tips-modify" v-if="formData.image">
							点击修改
						</view>
					</view>
					<!-- 上传后的图片 -->
					<image class="uploaded-img" mode="aspectFill" :src="formData.image ||
						'/static/icon/step_2_1.png'
						" />

					<view class="txt-tips">
						门头照
					</view>
				</view>

				<view class="item">
					<!-- 上传按钮 -->
					<view class="btn-upload" @click="uploadDoorImg('inner')">
						<template v-if="!formData.interiorImage">
							<image class="img" src="/static/icon/add_icon.png" />
							<!-- <view class="txt">点击上传内景照</view> -->
						</template>

						<!-- 提示：点击修改 -->
						<view class="text-tips-modify" v-if="formData.interiorImage">
							点击修改
						</view>
					</view>
					<!-- 上传后的图片 -->
					<image class="uploaded-img" mode="aspectFill" :src="formData.interiorImage ||
						'/static/icon/step_2_2.png'
						" />

					<view class="txt-tips">
						内景照
					</view>
				</view>

				<view class="item">
					<!-- 上传按钮 -->
					<view class="btn-upload" @click="uploadDoorImg('cashier')">
						<template v-if="!formData.cashierImage">
							<image class="img" src="/static/icon/add_icon.png" />
							<!-- <view class="txt">点击上传收银台照</view> -->
						</template>

						<!-- 提示：点击修改 -->
						<view class="text-tips-modify" v-if="formData.cashierImage">
							点击修改
						</view>
					</view>
					<!-- 上传后的图片 -->
					<image class="uploaded-img" mode="aspectFill" :src="formData.cashierImage ||
						'/static/icon/step_2_3.png'
						" />

					<view class="txt-tips">
						收银台照
					</view>
				</view>

				<view class="item">
					<!-- 上传按钮 -->
					<view class="btn-upload" @click="uploadHandleIdCardImg('handleIdCard')">
						<template v-if="!formData.handleIdCard">
							<image class="img" src="/static/icon/add_icon.png" />
							<!-- <view class="txt">点击上传手持身份证照</view> -->
						</template>

						<!-- 提示：点击修改 -->
						<view class="text-tips-modify" v-if="formData.handleIdCard">
							点击修改
						</view>
					</view>
					<!-- 上传后的图片 -->
					<image class="uploaded-img" mode="aspectFill" :src="formData.handleIdCard ||
						'/static/icon/step_2_4.png'
						" />

					<view class="txt-tips">
						手持身份证照
					</view>
				</view>
				<!-- showUploadExtentImage -->
				<view class="item" v-if="false">
					<!-- 上传按钮 -->
					<view class="btn-upload" @click="uploadSupplementImg">
						<template v-if="!formData.extentImage">
							<image class="img"
								src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-upload-bank.png" />
							<!-- <view class="txt">点击上传补充材料</view> -->
						</template>

						<!-- 提示：点击修改 -->
						<view class="text-tips-modify" v-if="formData.extentImage">
							点击修改
						</view>
					</view>
					<!-- 上传后的图片 -->
					<image class="uploaded-img" mode="aspectFill" :src="formData.extentImage ||
						'https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/bg-door-extent.png'
						" />
				</view>
			</view>
		</view>
	</view>
	<view class="btn-list">
		<!-- <view class="btn-base w200 gray" @click="childUpBtn()">上一步</view> -->
		<button class="btn-base" @click="childNextBtn()">下一步</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getOsssSignature,
		uploadImg,
		upload
	} from "@/utils/upload";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		uploadSignImage
	} from "@/api/upload";
	// 定义要触发的事件
	const emit = defineEmits(['upBtn', 'nextBtn']);
	// 表单数据
	let formData = ref({
		image: '',
		interiorImage: '',
		cashierImage: '',
		handleIdCard: '',
		shopFrontImgId: '', //门头照
		shopIndoorImgId: '', //场所环境
		shopCashierImgId: '' //收银台
	});
	// OSS签名
	let ossConfig = ref({});
	// 当前代理姓名、身份证号
	let agentName = ref(null);
	let queryParams = ref({
		image: ''

	});
	onLoad(async (options) => {
		agentName.value = options.name;
		formData.value.name = options.name;
		formData.value.number = options.idCardNo;
	});


	const childUpBtn = () => {
		emit('upBtn');
	}
	const childNextBtn = () => {
		emit('nextBtn', formData.value, 4)
	}


	function uploadDoorImg(type) {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['camera', 'album'], //调用原生相册和原生相机，弹出选择
			success: (res) => {
				let tempFilePath = res.tempFilePaths[0]
				uni.getImageInfo({
					src: tempFilePath,
					success: res => {
						let canvasWidth = res.width; //图片原始长宽
						let canvasHeight = res.height;
						let base = canvasWidth / canvasHeight;
						if (canvasWidth > 400) {
							canvasWidth = 400;
							canvasHeight = Math.floor(canvasWidth / base);
						}
						let img = new Image();
						img.src = tempFilePath; // 要压缩的图片
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d');
						canvas.width = canvasWidth;
						canvas.height = canvasHeight;

						//  将图片画到canvas上面   使用Canvas压缩
						ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
						let imgSrc = canvas.toDataURL('image/png');


						goBase64Upload(imgSrc, type);

						upload(imgSrc).then((res) => {
							let imgUrl = res;
							if (type == "door") {
								formData.value.image = imgUrl;
							} else if (type == "inner") {
								formData.value.interiorImage = imgUrl;
							} else if (type == "cashier") {
								formData.value.cashierImage = imgUrl;
							}

						});
					}
				});
			}
		})

	}

	function goBase64Upload(imgSrc, type) {
		var xhr = new XMLHttpRequest()
		xhr.responseType = 'blob'
		//如果是指xhr.responseType = 'blob',将返回一个Blob对象，而不是文本；
		xhr.onload = () => {
			let reader = new FileReader()
			reader.onload = (e) => {


				queryParams.value.image = e.target.result;
				uploadSignImage(queryParams.value)
					.then((res) => {
						console.log("签名提交成功后res", res)
						if (type == "door") {
							formData.value.shopFrontImgId = res;
						} else if (type == "inner") {
							formData.value.shopIndoorImgId = res;
						} else if (type == "cashier") {
							formData.value.shopCashierImgId = res;
						}

					})

				console.log("form=" + JSON.stringify(formData.value))
			}
			let rs = reader.readAsDataURL(xhr.response)
		}
		xhr.open('get', imgSrc)
		xhr.send()
	}
	// 上传内景照
	function uploadInsideImg(sourceType) {
		uploadImg(ossConfig.value, sourceType).then((res) => {
			let imgUrl = res;
			formData.value.interiorImage = imgUrl;
		});
	}

	// 上传收银台照
	function uploadCashierImg(sourceType) {
		uploadImg(ossConfig.value, sourceType).then((res) => {
			let imgUrl = res;
			formData.value.cashierImage = imgUrl;
		});
	}

	// 上传手持身份证照
	function uploadHandleIdCardImg(sourceType) {
		uploadImg(ossConfig.value, sourceType).then((res) => {
			let imgUrl = res;
			formData.value.handleIdCard = imgUrl;
		});
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>